import React, { useState, useEffect, Suspense } from "react";
import { BrowserRouter, Switch, Route, Link, useParams } from "react-router-dom";
import LoadingModule from "./pages/loading";

const IndexPage = React.lazy(() => import('./pages/index'));
const page404 = React.lazy(() => import("./pages/404"));
const SellInsurrance = React.lazy(() => import("./pages/sellInsurance/sell"));
const RegInsurrance = React.lazy(() => import("./pages/zhengXian/zhengxian"));
const HistoryList = React.lazy(() => import('./pages/historyList/historyList'));
const ClassShow = React.lazy(() => import('./pages/sellclass/sellclass'));

const routes = [
  {
    path: "/HistoryList",
    component: HistoryList,
  },
  {
    path: "/RegInsurrance",
    component: RegInsurrance,
  },
  {
    path: "/ClassShow/:classname",
    component: ClassShow,
  },
  {
    path: "/",
    component: IndexPage,
    exact: true,
  },
  {
    path: '*',
    component: IndexPage,
  }
];

function RouteWithSubRoutes(route) {
  return (
    <Route
      path={route.path}
      render={props => {
        // console.log(props)
        return (
          <Suspense fallback={<LoadingModule />}>
            <route.component routes={route.routes} /> {/* 不传入路由相关对象 */}
            {/* <route.component {...props} routes={route.routes} /> */}
          </Suspense>
        )
      }}
    />
  );
}

function PageContainer(props) {

  // if (document.documentElement.classList.contains("MicroMessenger")) {
  // }
  console.log(props)
  return (
    <div className="mobile-app">

      <BrowserRouter>
        <Switch>
          {routes.map((item, index) => (
            <RouteWithSubRoutes key={index} {...item} />
          ))}
        </Switch>
      </BrowserRouter>

    </div>
  );
}

export { PageContainer };
